<template>
    <div class="user-container container">
        <div class="header">
            <div class="user-info"> 
                <div class="icon">
                    <img class="fullimg" :src="icon" v-if="icon"/>
                    <span class="iconfont iconlianxiren" v-if="!icon"></span>
                </div>
                <div class="content">
                    <div class="name">{{username}}</div>
                    <div class="position-box">
                        <span>职位:</span>
                        <span class="position">{{position}}</span>
                    </div>
                </div>
            </div>
            <div class="enterprise-info">
                <span>企业:</span>
                <span class="name">{{ enterprisename}}</span>
                <div class="select">
                    <van-icon class="" name="arrow-down" />
                </div>
                <div class="auth-box">
                    <span class="iconfont iconrenzheng" :class="{'authentication':authentication}"></span>
                    <span class="authenticationString">{{authenticationString}}</span>
                </div>
            </div>
        </div>

        <van-cell-group>
            <van-cell icon="" title="个人设置" is-link @click="settings" />
            <van-cell icon="" title="意见反馈" is-link />
        </van-cell-group>

         <div id="container" style="width:100%; height:300px">

         </div>

        <Footer :active="4"></Footer>
    </div>
</template>
<script>
import Footer from '@/components/footer';
import {mapState} from 'vuex';
export default {
    name: 'User',
    components:{
        Footer,
    },
    data() {
        return {
            userid:'',
            username: '',
            icon:'',
            position:'',
            enterprisename:'南云信息',
            authentication:1,
        }
    },
    computed: {
        authenticationString() {
            return this.authentication?'已认证':'未认证';
        },
        ...mapState(['userInfo'])
    },
    mounted() {
        let item = localStorage.getItem('userInfo');
        item = JSON.parse(item);
        this.userid = item.userid;
        this.username = item.username;
        this.icon = item.icon;
        this.position = item.position;

var map = new AMap.Map('container',{
    viewMode: '2D',  //设置地图模式
    lang:'zh_cn',  //设置地图语言类型
});

    },
    methods: {
        settings() {
            this.$animatePush('/settings');
        }
    }
}
</script>
<style lang="less">
@import '../../css/var.less';
.user-container {
    .header {
        background:#fff;
        padding:@space;
        .user-info {
            display:flex;
            .icon {
                width:45px;
                height:45px;
                line-height:45px;
                text-align: center;
                background:@color;
                border-radius:5px;
                overflow: hidden;
                .iconfont {
                    color:#fff;
                    font-size: 24px;
                }
            }
            .content {
                margin-left: 10px;
                .position-box {
                    margin-top:10px;
                    font-size: 12px;
                    color:#333;
                    .position {
                        margin-left: 10px;
                    }
                }
            }
        }
        .enterprise-info {
            display:flex;
            align-items: center;
            font-size:14px;
            color:#333;
            margin-top:20px;
            .name {
                margin-left: 10px;
            }
            .select {
                margin-left: 5px;
            }
            .auth-box {
                margin-left: 25px;
                .authentication {
                    color:green;
                }
                .authenticationString {
                    margin-left: 5px;
                }
            }
        }
    }
    .list-box {
        background:#fff;
        padding:@space;
        margin: @space 0;
        .title-box {
            display:flex;
            justify-content:space-between;
            align-items:center;
        }
        .item-box {
            margin-top: 10px;
            display:flex;
            justify-content:flex-start;
            align-items:center;
            flex-wrap:wrap;
            .item {
                width:90px;
                height: 60px;
                margin-bottom: @space;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:center;
                .iconfont {
                    font-size:30px;
                    color:@color;
                }
                .name {
                    margin-top:5px;
                    font-size:14px;
                    color:#666;
                   
                }
            }
        }
    }
}
</style>